import Link from 'next/link';
import Router from 'next/router';
import { Button } from 'antd';
import './nav.less';

const handleJump = () => {
    Router.push({
        pathname: '/fetch'
    });
};

const handleSaga = () => {
    Router.push({
        pathname: '/saga'
    });
};
const handleRouteChange = url => {
    console.log('App is changing to: ', url);
};

Router.events.on('routeChangeStart', handleRouteChange);

const Nav = () => (
    <nav>
        <ul className="nav flex justify-center">
            <li>
                <Link href="/about?id=123" as="/about/123">
                    <Button type="primary">路由跳转</Button>
                </Link>
            </li>
            <li onClick={handleJump}>
                <Button type="primary">数据请求</Button>
            </li>
            <li>
                <Link href="/redux">
                    <Button type="primary">redux</Button>
                </Link>
            </li>
            <li>
                <Link href="/thunk">
                    <Button type="primary">redux-thunk 新闻</Button>
                </Link>
            </li>
            <li onClick={handleSaga}>
                <Button type="primary">redux-saga 新闻</Button>
            </li>
        </ul>
    </nav>
);

export default Nav;
